// 商品存货周转天数
// 创建 ECharts 格式化工具实例
var formatUtil = echarts.format;

// 初始化一个名为 'turnaround' 的图表，并将其挂载到 id 为 'turnaround' 的 DOM 元素上
var turnaround = echarts.init(document.getElementById('turnaround'));

// 通过 AJAX 请求加载名为“各类商品存货周转天数.json”的数据，并在加载完成后处理数据
$.get("data/各类商品存货周转天数.json").done(function (data) {
    // 设置 treemap 图表的配置选项
    turnaround.setOption({
        // 提示框组件的格式化器，显示数据项的名称和数值
        tooltip: {
            formatter: '{b}：{c}'
        },
        // 系列列表
        series: [{
            // 系列类型为 'treemap'
            type: 'treemap',
            // 标签的显示方式和样式配置
            label: {
                show: true,
                position: 'insideTopLeft',
                distance: 0,
                padding: 10,
                formatter: "{b}\n{a|{c}}", // 使用富文本标签显示数据项的名称和数值
                rich: {
                    a: {
                        padding: 6,
                        align: 'right',
                        verticalAlign: 'bottom',
                        color: '#fff',
                    }
                }
            },
            // treemap 图表的行为配置
            roam: false, // 禁止拖拽漫游
            nodeClick: false, // 禁止节点点击
            breadcrumb: {show: false}, // 不显示面包屑导航
            itemStyle: {
                gapWidth: 5, // 块与块之间的间距
                borderColor: 'transparent' // 边框颜色透明
            },
            // 使用从数据中获取的内容填充 treemap 图表
            data: data.data
        }]
    });
});
// 首先创建了一个 ECharts 格式化工具实例，并初始化了一个名为 ‘turnaround’ 的图表，将其挂到 id 为 ‘turnaround’ 的 DOM 元素上。然后通过 AJAX 请求加载名为“各类商品存货周转天数.json”的数据，在数据加载完成后利用加载的数据设置了 treemap 图表的配置选项，包括 tooltip 提示框的格式化器、series系列的设置以及一些与图表行为相关的配置。最后通过 setOption 方法将这些配置应用到图表中。










// 存销量
// 初始化一个名为 'stockSales' 的图表，并将其挂载到 id 为 'stockSales' 的 DOM 元素上
var stockSales = echarts.init(document.getElementById('stockSales'));

// 通过 AJAX 请求加载名为“商品库存数量和销售数量.json”的数据，并在加载完成后处理数据
$.get("data/商品库存数量和销售数量.json").done(function (data) {
    // 设置 stockSales 图表的配置选项
    stockSales.setOption({
        // 设置 tooltip，当鼠标悬停在数据点时显示数据
        tooltip: {
            trigger: 'axis', // 坐标轴触发
            axisPointer: {
                type: 'shadow' // 坐标指示器类型为阴影
            }
        },
        // 设置 grid，控制图表的位置和大小
        grid: {
            left: '0%', // 左边距
            top: '60', // 上边距
            right: '5%', // 右边距
            bottom: '10', // 下边距
            containLabel: true // 包含图表标题和坐标轴标签，防止被遮挡
        },
        // 设置柱状图的宽度
        barWidth: '45%', // 柱状图宽度占比
        // 设置图例，即数据系列的名称
        legend: {
            data: data.数量类型, // 图例的数据
            top: '22' // 图例距离容器顶部的距离
        },
        // 设置 X 轴，对应销售数量和库存数量的数值轴
        xAxis: {
            type: 'value', // 值类型的坐标轴
            min: 0, // 坐标轴刻度最小值
            boundaryGap: [0, 0.01], // 坐标轴两端空白策略
            axisLine: {lineStyle: {width: 0}}, // 坐标轴线的样式设置
        },
        // 设置 Y 轴，对应商品名称的类目轴
        yAxis: {
            type: 'category', // 类目类型的坐标轴
            splitLine: {lineStyle: {width: 0}}, // 分隔线的样式设置
            data: data.商品名称 // Y 轴的类目数据
        },
        // 设置 series，系列，每个系列是一组关联的数据
        series: [
            {
                name: '销售数量', // 系列名称
                type: 'bar', // 柱状图类型
                stack: '数量', // 数据堆叠的分组标识
                label: {
                    position: 'insideRight', // 数据标签位置
                    padding: [0, 5, 0, 0], // 数据标签内边距
                },
                data: data.销售数量 // 对应销售数量的数据
            },
            {
                name: '库存数量', // 系列名称
                type: 'bar', // 柱状图类型
                stack: '数量', // 数据堆叠的分组标识
                label: {
                    position: 'insideRight', // 数据标签位置
                    padding: [0, 5, 0, 0], // 数据标签内边距
                },
                data: data.库存数量 // 对应库存数量的数据
            }
        ]
    });
});



// 滞销商品
// 初始化一个名为 'unsalable' 的图表，并将其挂载到 id 为 'unsalable' 的 DOM 元素上
var unsalable = echarts.init(document.getElementById('unsalable'));

// 通过 AJAX 请求加载名为“商品滞销数据.json”的数据，并在加载完成后处理数据
$.get("data/商品滞销数据.json").done(function (data) {
    // 设置 unsalable 图表的配置选项
    unsalable.setOption({
        // 设置 tooltip，当鼠标悬停在数据点时显示数据
        tooltip: {
            trigger: 'axis', // 坐标轴触发
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        // 设置 grid，控制图表的位置和大小
        grid: {
            left: '10', // 左边距
            right: '10', // 右边距
            bottom: '10', // 下边距
            containLabel: true // 包含图表标题和坐标轴标签，防止被遮挡
        },
        // 设置 toolbox，显示工具栏，可进行数据视图、切换图表类型、重置和保存为图片等操作
        toolbox: {
            show: false, // 不显示工具栏
            feature: {
                dataView: {show: true, readOnly: false}, // 数据视图
                magicType: {show: true, type: ['line', 'bar']}, // 切换图表类型
                restore: {show: true}, // 恢复
                saveAsImage: {show: true} // 保存为图片
            }
        },
        // 设置 legend，图例，通过 data.name 控制图例的显示
        legend: {
            data: data.name
        },
        // 设置柱状图的间距
        barGap: '10%', 
        // 设置柱状图类目间的间距
        barCategoryGap: '25%', 
        // 设置 X 轴
        xAxis: [
            {
                type: 'category', // 类目轴，适用于离散的类目数据
                data: data.商品名称, // X 轴数据
                axisPointer: {type: 'shadow'}, // 设置坐标轴指示器
                splitLine: {lineStyle: {width: 0}}, // 去除横向分割线
                axisLabel: {rotate: 30} // 旋转 X 轴标签
            }
        ],
        // 设置两个 Y 轴
        yAxis: [
            {
                type: 'value', // 数值轴，适用于连续数据
                name: '', // Y 轴名称
                min: 0, // 最小值
                max: 500, // 最大值
                interval: 100, // 刻度间隔
                axisLabel: {
                    formatter: '{value}' // 刻度标签的格式化字符串
                },
                axisLine: {lineStyle: {width: 0}}, // 去除纵向轴线
            },
            {
                type: 'value',
                name: '',
                min: 0,
                max: 1,
                interval: 0.2,
                axisLabel: {
                    formatter: '{value} '
                },
                axisLine: {lineStyle: {width: 0}},
            }
        ],
        // 设置 series，系列，每个系列是一组关联的数据
        series: [
            {
                name: '滞销金额', // 系列名称
                type: 'bar', // 柱状图
                data: data.滞销金额 // Y 轴数据
            },
            {
                name: '存货周转率',
                type: 'line', // 折线图
                yAxisIndex: 1, // 使用第二个 Y 轴
                label: {
                    show: 'true', // 显示数据标签
                    color: '#fff', // 标签文本颜色
                    backgroundColor: 'rgba(235,48,48,0.8)', // 标签背景颜色
                    verticalAlign: 'middle', // 垂直对齐方式
                    padding: [2, 4, 0, 4], // 内边距
                    borderRadius: 4, // 边框圆角
                    position: 'inside' // 标签位置
                },
                data: data.存货周转率
            },
            {
                name: '库存数量',
                type: 'bar',
                data: data.库存数量
            }
        ]
    });
});



//品类库存占比
// 创建一个基于 id 为 'categoryStock' 的 DOM 元素的 echarts 实例
var categoryStock = echarts.init(document.getElementById('categoryStock'));
// 通过 AJAX 异步请求获取 JSON 数据
$.get("data/不同类型的商品库存数量.json").done(function (data) {
    // 解析获取的 JSON 数据（如果数据已经是 JSON 格式，则不需要解析）
    //data = JSON.parse(data),
    // 使用 echarts 实例的 setOption 方法设置图表的配置项和数据
    categoryStock.setOption({
        // 提示框组件
        tooltip: {
            trigger: 'item', // 鼠标悬停项时触发
            formatter: "{a} <br/>{b}: {c} ({d}%)" // 提示框内容的格式
        },
        // 图例组件
        legend: {
            orient: 'vertical', // 图例的布局朝向
            data: data.类型, // 图例的数据
            left: 10, // 图例距离容器左侧的距离
            top: 20, // 图例距离容器顶部的距离
        },
        // 系列列表。每个系列通过 type 决定自己的图表类型
        series: [
            {
                name: '品类', // 系列名称
                type: 'pie', // 饼图类型
                radius: [0, '40%'], // 饼图的半径范围
                center: ['55%', '53%'], // 饼图的位置
                // 标签配置
                label: {
                    normal: {
                        position: 'inner' // 内部显示标签
                    }
                },
                // 标签视觉引导线配置
                labelLine: {
                    normal: {
                        show: false // 不显示标签的视觉引导线
                    }
                },
                data: data.一级商品 // 饼图数据，一级商品的库存数量占比
            },
            {
                name: '品类', // 系列名称
                type: 'pie', // 饼图类型
                // 自定义颜色
                color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple',
                    'DarkOrchid', 'Navy', '#061e42', 'black', '#4f8fa8'],
                radius: ['40%', '66%'], // 饼图的半径范围
                center: ['55%', '53%'], // 饼图的位置
                selectedMode: 'multiple', // 选择模式为多选
                // 图形样式配置
                itemStyle: {
                    borderWidth: '2', // 图形边框宽度
                    borderColor: 'none' // 图形边框颜色
                },
                label: {},
                data: data.二级商品 // 饼图数据，二级商品的库存数量占比
            }
        ]
    });
});



// 设备容量
// 创建一个基于 id 为 'mVolume' 的 DOM 元素的 echarts 实例
var mVolume = echarts.init(document.getElementById('mVolume'));
// 通过 AJAX 异步请求获取 JSON 数据
$.get("data/不同地点售货机库存数量和缺货数量.json").done(function (data) {
    // 解析获取的 JSON 数据（如果数据已经是 JSON 格式，则不需要解析）
    // data = JSON.parse(data),
    // 使用 echarts 实例的 setOption 方法设置图表的配置项和数据
    mVolume.setOption({
        // 提示框组件
        tooltip: {
            trigger: 'axis' // 提示框触发方式，鼠标移动到数据项上时触发
        },
        // 图例组件
        legend: {
            data: data.类型, // 图例的数据
            type: 'scroll' // 图例的类型为可滚动
        },
        // 柱状图宽度
        barWidth: '35%',
        // 柱状图之间的间距
        barCategoryGap: '40%',
        // 直角坐标系内绘图网格
        grid: {
            left: '10', // 网格距离容器左侧的距离
            right: '20', // 网格距离容器右侧的距离
            bottom: '10', // 网格距离容器底部的距离
            containLabel: true // 包含坐标轴的刻度标签
        },
        // 直角坐标系 grid 中的 x 轴
        xAxis: {
            type: 'category', // x轴类型为类目型
            data: data.地点 // x轴的数据
        },
        // 直角坐标系 grid 中的 y 轴
        yAxis: {
            type: 'value' // y轴类型为数值型
        },
        // 系列列表。每个系列通过 type 决定自己的图表类型
        series: [
            {
                name: '库存总量', // 系列名称
                type: 'bar', // 柱状图类型
                stack: '总量', // 数据堆叠
                // 标签配置
                label: {
                    position: 'insideTop', // 内部置顶显示标签
                    padding: [5, 0, 0, 0] // 标签的内边距
                },
                data: data.库存数量, // 柱状图的数据，地点对应的库存数量
            },
            {
                // 线型图配置
                type: 'line', // 线型图类型
                name: '预警线', // 系列名称
                connectNulls: 'true', // 连接空数据
                data: [150, 150, 150, 150, 150], // 线型图的数据，预警线的数值
            },
            {
                name: '缺货总量', // 系列名称
                type: 'bar', // 柱状图类型
                stack: '总量', // 数据堆叠
                // 标签配置
                label: {
                    position: 'insideTop', // 内部置顶显示标签
                    padding: [5, 0, 0, 0] // 标签的内边距
                },
                // 柱状图项样式
                itemStyle: {
                    color: '#ca841e' // 柱状图的颜色
                },
                data: data.缺货数量, // 柱状图的数据，地点对应的缺货数量
            }
        ]
    });
});


// 监听窗口大小变化事件
window.onresize = function() {
    // 调用对应 echarts 实例的 resize 方法，使图表在窗口大小变化时自适应
    turnaround.resize(); // 营业额图表
    stockSales.resize(); // 库存销量图表
    unsalable.resize(); // 滞销商品图表
    categoryStock.resize(); // 商品库存饼图
    mVolume.resize(); // 月销量趋势图表
}